<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书城主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/static/bg_img/favicon.ico">
    <link href="static/1/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/1/css/swiper.min.css" rel="stylesheet">
    <script src="static/1/js/jquery-3.4.1.min.js"></script>
    <script src="static/1/js/swiper-bundle.min.js"></script>
    <script src="static/1/js/bootstrap.min.js"></script>
    <style>
        .swiper-slide img {
            width: 100%;
        }

        .line-limit-length {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ld-img {
            width: 100px;
            height: 175px;
            object-fit: cover;
        }
    </style>
    <link href="{{ url_for('static',filename='layui/css/layui.css') }}" rel="stylesheet"/>
    <script type="text/javascript" src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
    <script>
        function f4() {
            content1 = $("#content1").val();
            alert(content1)
        }
    </script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });

        function changeupwd() {
            layer.open({
                type: 1,
                content: 'ddede'
            });
        }
    </script>
</head>
<body>
<div class="container vertical-center-parent">
    <div class="row">
        <div class="col-sm-12" style="height: 360px;">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="static/bg_img/LB1.jpg"/>
                    </div>
                    <div class="swiper-slide">
                        <img src="static/bg_img/LB2.jpg"/>
                    </div>
                    <div class="swiper-slide">
                        <img src="static/bg_img/LB3.jpg"/>
                    </div>
                    <div class="swiper-slide">
                        <img src="static/bg_img/LB4.jpg"/>
                    </div>
                    <div class="swiper-slide">
                        <img src="static/bg_img/LB5.jpg"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<div class="container">
    <hr>
    <div class="row">
        <div class="col-md-12 text-center">
            <h3>猜你喜欢</h3>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-xs-6 col-md-3 thumbnail">
            <a href="/bookdetails?bid={{res[0]['book_id']}}" class="thumbnail">
                <img class="ld-img" src={{ res[0]["img"] }} alt="...">
            </a>
            <br>
            <div>
                <h3 class="line-limit-length"> &nbsp&nbsp{{ res[0]["book_name"] }}</h3>
                <br>
                <dl>
                    <dt>作者：</dt>
                    <dd>&nbsp&nbsp{{ res[0]["author"] }}</dd>
                    <dt>单价：</dt>
                    <dd><p>&nbsp&nbsp{{ res[0]["book_price"] }}</p></dd>
                    <dt>库存：</dt>
                    <dd><p>&nbsp&nbsp{{ res[0]["book_count"] }}</p></dd>
                    <dd><p class="line-limit-length">{{ res[0]["book_des"] }}</p></dd>
                </dl>
                <br>
            </div>
            <a class="btn btn-primary btn-large" href="/bookdetails?bid={{res[0]['book_id']}}"  role="button">查看书目 &raquo;</a>
        </div>
        <div class="col-xs-6 col-md-3 thumbnail">
            <a href="/bookdetails?bid={{res[1]['book_id']}}" class="thumbnail">
                <img class="ld-img" src={{ res[1]["img"] }} alt="...">
            </a>
            <br>
            <div>
               <h3 class="line-limit-length"> &nbsp&nbsp{{ res[1]["book_name"] }}</h3>
                <br>
                <dl>
                    <dt>作者：</dt>
                    <dd>&nbsp&nbsp{{ res[1]["author"] }}</dd>
                    <dt>单价：</dt>
                    <dd><p>&nbsp&nbsp{{ res[1]["book_price"] }}</p></dd>
                    <dt>库存：</dt>
                    <dd><p>&nbsp&nbsp{{ res[1]["book_count"] }}</p></dd>
                    <dd><p class="line-limit-length">{{ res[1]["book_des"] }}</p></dd>
                </dl>
                <br>
            </div>
            <a class="btn btn-primary btn-large" href="/bookdetails?bid={{res[1]['book_id']}}" role="button">查看书目 &raquo;</a>
        </div>
        <div class="col-xs-6 col-md-3 thumbnail">
            <a href="/bookdetails?bid={{res[2]['book_id']}}" class="thumbnail">
                <img class="ld-img" src={{ res[2]["img"] }} alt="...">
            </a>
            <br>
            <div>
                <h3 class="line-limit-length"> &nbsp&nbsp{{ res[2]["book_name"] }}</h3>
                <br>
                <dl>
                    <dt>作者：</dt>
                    <dd>&nbsp&nbsp{{ res[2]["author"] }}</dd>
                    <dt>单价：</dt>
                    <dd><p>&nbsp&nbsp{{ res[2]["book_price"] }}</p></dd>
                    <dt>库存：</dt>
                    <dd><p>&nbsp&nbsp{{ res[2]["book_count"] }}</p></dd>
                    <dd><p class="line-limit-length">{{ res[2]["book_des"] }}</p></dd>
                </dl>
                <br>
            </div>
            <a class="btn btn-primary btn-large" href="/bookdetails?bid={{res[2]['book_id']}}"} role="button">查看书目 &raquo;</a>
        </div>
        <div class="col-xs-6 col-md-3 thumbnail">
            <a href="/bookdetails?bid={{res[3]['book_id']}}" class="thumbnail">
                <img class="ld-img" src={{ res[3]["img"] }}  alt="...">
            </a>
            <br>
            <div>
                <h3 class="line-limit-length"> &nbsp&nbsp{{ res[3]["book_name"] }}</h3>
                <br>
                <dl>
                    <dt>作者：</dt>
                    <dd>&nbsp&nbsp{{ res[3]["author"] }}</dd>
                    <dt>单价：</dt>
                    <dd><p>&nbsp&nbsp{{ res[3]["book_price"] }}</p></dd>
                    <dt>库存：</dt>
                    <dd><p>&nbsp&nbsp{{ res[3]["book_count"] }}</p></dd>
                    <dd><p class="line-limit-length">{{ res[3]["book_des"] }}</p></dd>
                </dl>
                <br>
            </div>
            <a class="btn btn-primary btn-large" href="/bookdetails?bid={{res[3]['book_id']}}" role="button">查看书目 &raquo;</a>
        </div>
    </div>
    <hr>
    <footer class="text-center">
        <p>Copyright &#169; 2021-2022 飞鹰团队, Lales.</p>
    </footer>
</div> <!-- /container -->

</body>
<script>
    var mySwiper = new Swiper('.swiper', {
        //设置自动播放
        autoplay: {
            delay: 2000,
            disableOnInteraction: false
        },
        loop: true, // 循环模式选项
    })
</script>
</html>